<template>
  <el-card class="monitor-indicator-list">
    <tag-content-header search refresh setting @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span class="title-text">指标分类列表</span>
      </template>
    </tag-content-header>

    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #alarmCount="{ scope }">
        <el-tag :type="scope.row.alarmCount > 0 ? 'warning' : ''" effect="dark">{{ scope.row.alarmCount }}</el-tag>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip effect="dark" content="查看代码值" placement="top" :enterable="false">
            <icon-svg name="iconCode" class="svg-edit" @click.native="handleCodeReviewClick(scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
            <icon-svg name="iconView" class="svg-view" @click.native="handleDetailClick(scope.row)"></icon-svg>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <code-drawer ref="codeDrawer"></code-drawer>
    <monitor-chart-drawer ref="monitroChartDrawer"></monitor-chart-drawer>
  </el-card>
</template>
<script>
import $monitor from './api'
import codeDrawer from './monitor-code-drawer'
import monitorChartDrawer from './monitor-chart-drawer'
export default {
  name: 'IndicatorList',
  components: {
    codeDrawer,
    monitorChartDrawer
  },
  data() {
    return {
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '指标名称',
          prop: 'tagNm',
          search: true,
          searchKey: '',
          align: 'left'
        },
        {
          show: true,
          label: '代码值个数',
          prop: 'codeCdCount',
          align: 'center'
        },
        {
          show: true,
          label: '7日告警个数',
          prop: 'alarmCount',
          align: 'center'
        },
        {
          show: true,
          label: '创建时间',
          prop: 'createTm',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 160
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    getList() {
      this.loading = true
      $monitor
        .indicatorList(this.params)
        .then(({ data }) => {
          if (data && data.code === '0') {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          } else {
            this.message.error(data.data || data.msg)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    handleCodeReviewClick(row) {
      this.$refs.codeDrawer.showDrawer(row.tagId)
    },
    handleDetailClick(row) {
      this.$refs.monitroChartDrawer.showDrawer(row)
      // this.$router.push({ name: 'tagDetail', params: { tagId: row.tagId, orgId: row.orgId } })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss"></style>
